<template>
  <div class="news_detail">
    <div class="ndetail_content">
      <div class="ndetail_left">
        <div class="ndetail_title">{{ title }}</div>
        <div class="ndetail_info">
          <div class="ndetail_class">分类：公司资讯</div>
          <div class="ndetail_time">
            <Icons font="#icon-sj" class="icon-sj" fontSize="16px"></Icons>发布时间：{{ createTime }}
          </div>
        </div>
        <div class="ndetail_iframe" v-html="content">
        </div>
        <Spin size="large" fix v-if="loading"></Spin>
      </div>

      <QdNotice ref="QdNotice"></QdNotice>
    </div>
  </div>
</template>

<script>
import QdNotice from "@/components/common/Qd-Notice.vue";


export default {
  components: { QdNotice },
  data() {
    return {
      title: "标题",
      content: '\n0号车用柴油(VI)物料价格为 7910\n92号车用汽油(VIB)物料价格为 8830\n95号车用汽油(VIB)物料价格为 8930\n70#沥青物料价格为 3770\n石油混合二甲苯物料价格为 8400\n石油混合二甲苯物料价格为 7900\n液化石油气物料价格为 5700\n液化气物料价格为 5330\n燃料油物料价格为 6650\n苯物料价格为 8780\n石油焦物料价格为 1500\n燃料油物料价格为 5800\n燃料油物料价格为 6200\n燃料油物料价格为 7400\n0号车用柴油(VI)物料价格为 7450',
      companyList: [
        {
          id: '0',
          name: '中和宇通（山东）石油化工有限公司'
        },
        {
          id: '1',
          name: '12中和宇通（山东）石油化工有限公司'
        },
        {
          id: '2',
          name: '22中和宇通（山东）石油化工有限公司'
        },
        {
          id: '3',
          name: '333中和宇通（山东）石油化工有限公司'
        },
        {
          id: '4',
          name: '44422中和宇通（山东）石油化工有限公司'
        },
        {
          id: '5',
          name: '55522中和宇通（山东）石油化工有限公司'
        },
        {
          id: '6',
          name: '66655522中和宇通（山东）石油化工有限公司'
        },
        {
          id: '7',
          name: '757775522中和宇通（山东）石油化工有限公司'
        },
      ],
      createTime: "",
      apis: "API_articleInfo",
      loading: false

    };
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      let id = this.$route.query.id
      console.log("id", id)
      if (id) {
        this.loading = true
        this.httpGet(this.API[this.apis], {
          id
        }).then(res => {
          this.loading = false
          this.content = res.data.content
          this.title = res.data.title
          this.createTime = res.data.createTime

        }).catch(error => {
          this.loading = false
          console.log("err", error);
        })
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

.news_detail {
  width: 100%;
  min-height: 500px;
  padding-bottom: 150px;
  background-color: #f3f3f3;

  .ndetail_content {
    .flex-x(space-between, flex-start);
    width: 1185px;
    margin: 20px auto;

    .ndetail_left {
      width: 858px;
      min-height: 662px;
      padding: 30px 38px;
      background-color: #ffffff;
      position: relative;

      .ndetail_title {
        padding-bottom: 20px;
        border-bottom: 1px solid #d8d8d8;
        font-size: 16px;
        font-weight: bold;
        text-align: left
      }

      .ndetail_info {
        .flex-x(flex-start);
        margin-top: 10px;
        color: #9e9e9e;

        .ndetail_time {
          .flex-x(flex-start);
          margin: 0 4px 0 20px;

          .icon-sj {
            margin-right: 2px;
          }
        }
      }

      .ndetail_iframe {
        margin-top: 26px;
        text-align: left;
        line-height: 2;
      }
    }
  }
}
</style>
